<template>
	<view class="main">
		<view @touchmove.stop.prevent :class="isshowpopup ? 'shade' : ''"></view>
		<view class="shopingdetail">
			<view class="header">
				<swiper class="swiper" @change="lunbo" circular :interval="interval" :duration="duration">
					<swiper-item v-for="(i, index) in shoppingFrom.slider_image" :key="i">
						<view class="swiper-item uni-bg-red"><image @click="imagePreview(index)" :src="i" mode=""></image></view>
					</swiper-item>
				</swiper>
				<view class="dott">
					<view class="dot-lt">图片{{ lunboStyle }}/{{ shoppingFrom.slider_image.length }}</view>
				</view>
			</view>

			<view class="content">
				<!-- 1 -->
				<view class="">
					<view class="">
						<view class="">
							<text v-if="shoppingFrom.expend_integral == 0">￥</text>
							<text>
								<text v-if="shoppingFrom.expend_integral == 0">{{ shoppingFrom.is_spec == 0 ? shoppingFrom.price : shoppingFrom.specs[0].price }}</text>
								<text v-if="shoppingFrom.expend_integral != 0" style="font-size: 32rpx;color: #289958;display: inline-block;">
									{{ shoppingFrom.expend_integral + '积分' }}
								</text>
							</text>
						</view>
						<view class="vip-price lijian" v-if="shoppingFrom.expend_integral == 0">
							<text class="member">会员</text>
							<text class="lijian">立减</text>
							￥{{ shoppingFrom.is_spec == 0 ? shoppingFrom.vip_price : shoppingFrom.specs[0].vip_price }}
						</view>
					</view>

					<view class="">
						<view class="" class="detail-title">{{ shoppingFrom.store_name }}</view>
						<view class="">
							<image src="http://www.szzn.group/uploads/20221107/be40749edd900afaa50a26715437d86d.png" mode=""></image>
							<button open-type="share">123</button>
						</view>
					</view>

					<view class="">·&nbsp;{{ shoppingFrom.store_info }}</view>

					<view class="" @click="goVip">
						<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/08e0b202209221559288727.png" mode=""></image>
						<view class="openblackcode">开通黑卡，下单立减2元</view>
						<view class="open">
							<view class="">开通</view>
							<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/27270202209221534514540.png" mode=""></image>
						</view>
					</view>
				</view>

				<!-- 2 -->
				<view class=""><image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/8dd73202209221605168145.png" mode="widthFix"></image></view>

				<!-- 3 -->
				<view class="">
					<view class="" @click="immediately(shoppingFrom.is_spec, 0, 0)" :class="shoppingFrom.is_spec == 0 ? 'heightss' : ''">
						<view class="" v-if="shoppingFrom.is_spec != 0">规格</view>
						<view class="">{{ specification }}</view>
						<view class="" v-if="shoppingFrom.is_spec != 0">
							<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/27270202209221534514540.png" mode=""></image>
						</view>
					</view>

					<view class="">
						<view class="">运费</view>
						<view class="">￥{{ shoppingFrom.postage }}</view>
						<view class="">{{ shoppingFrom.sales }}人付款</view>
					</view>

					<view class="">
						<view class="">服务</view>
						<view class="">
							<view class="">
								<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/7285e202209221713555387.png"></image>
								<view>物联网认证</view>
							</view>
							<view class="">
								<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/7285e202209221713555387.png"></image>
								<view>产地直供</view>
							</view>
							<view class="">
								<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/7285e202209221713555387.png"></image>
								<view>品质溯源</view>
							</view>
							<view class="">
								<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/7285e202209221713555387.png"></image>
								<view>大数据甄选</view>
							</view>
							<view class="">
								<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/7285e202209221713555387.png"></image>
								<view>正品保证</view>
							</view>
						</view>
						<view class=""><image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/27270202209221534514540.png" mode=""></image></view>
					</view>
				</view>
				<!-- 4 -->
				<view class="" style="opacity: 0;">
					<!-- <view class="">
						<view class=""><image src="http://www.szzn.group/uploads/20221107/2e5aa1e6f7a8b33aaad9fe403c0826fd.png" mode=""></image></view>

						<view class="">
							<image src="http://www.szzn.group/uploads/20221107/b7e7904f35f9964dc9b5968ffee0532a.png" mode=""></image>
							<view class="">
								<view class="">品控监测</view>
								<view class="">已检测</view>
							</view>
						</view>

						<view class="detail-report">
							<!-- <image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/08e0b202209221559288727.png"
								mode=""></image> 
							<view class="">点击查看详细检测报告</view>
						</view>

						<view class="">
							<view class="">
								<image src="http://www.szzn.group/uploads/20221107/4bab83982309f91706b36f00339b7d59.png" mode=""></image>
								<view class="pin-kong">品控监测</view>
							</view>

							<view class="">
								<image src="http://www.szzn.group/uploads/20221107/488d5b55e13fa01b5f621d283f3da9a9.png" mode=""></image>
								<view class="pin-kong">优质产地</view>
							</view>
						</view>
					</view> -->
				</view>

				<!-- 5 -->
				<view class="">
					<view class="">
						<view class="">
							商品评价
							<text>({{ pinhjiaList.length }})</text>
						</view>
						<view class="" @click="evaluate">
							<!-- <view>好评<text class="yanse">88%</text></view> -->
							<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/27270202209221534514540.png" mode=""></image>
						</view>
					</view>
					<view class="" v-if="pinhjiaList.length != 0">
						<view class=""><image :src="pinhjiaList[0].avatar==''?'https://www.szzn.group/uploads/20221120/1d9d7924506d3263ec0328762d7afdbe.jpg':pinhjiaList[0].avatar==null?'https://www.szzn.group/uploads/20221120/1d9d7924506d3263ec0328762d7afdbe.jpg':pinhjiaList[0].avatar==undefined?'https://www.szzn.group/uploads/20221120/1d9d7924506d3263ec0328762d7afdbe.jpg':pinhjiaList[0].avatar" mode=""></image></view>
						<view class="">
							<view class="">{{ pinhjiaList[0].nickname ==''?'微信用户':pinhjiaList[0].nickname ==null?'微信用户':pinhjiaList[0].nickname ==undefined?'微信用户':pinhjiaList[0].nickname =='*'?'微信用户':pinhjiaList[0].nickname}}</view>
							<view class="" style="font-size: 24rpx;">{{ pinhjiaList[0].add_time }}</view>
						</view>
						<view class="">
							<van-rate readonly :value="pinhjiaList[0].product_score" @change="onChange" allow-half void-icon="star" void-color="#eee" color="#f5ca48" size="20px" />
						</view>
					</view>

					<view class="" v-if="pinhjiaList.length != 0">{{ pinhjiaList[0].comment }}</view>
					<view class="" v-if="pinhjiaList[0].pics.length != 0"><image v-for="item in pinhjiaList[0].pics" :key="item.id" :src="item.image" mode=""></image></view>

					<view class="" v-if="pinhjiaList.length == 0"><view class="" style="color: #bbb;text-align: center;">该商品暂无评价</view></view>
				</view>

				<!-- 6 -->
				<view class="">
					<view class="">
						<view class="">原产地直供</view>
						<image class="" src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/27270202209221534514540.png" mode=""></image>
					</view>

					<view class="yuandi-image" v-if="jf == '' && shoppingFrom.suppliers != null">
						<image v-if="jf == '' && shoppingFrom.suppliers != null" src="http://www.szzn.group/uploads/20221107/b79e210d9ddec6f7e4fe74f334e83b82.png" mode="">
							<view class="title" v-if="jf == '' && shoppingFrom.suppliers != null">{{ shoppingFrom.suppliers.title }}</view>
							<view class="pic" v-if="jf == '' && shoppingFrom.suppliers != null">
								<image src="http://www.szzn.group/uploads/20221107/6c56736658b847ad6e4f51343190db92.png" mode=""></image>
							</view>
							<view class="map-title" v-if="jf == '' && shoppingFrom.suppliers != null">
								<map class="map" style="width: 100%;" :enable-satellite="true" :latitude="latitude" :longitude="longitude" :markers="marker">
									<view class="address">
										<image src="http://www.szzn.group/uploads/20221107/8be37d58b50d8e01dbfdbea311a62534.png" mode=""></image>
										<view>{{ address }}</view>
									</view>
								</map>
							</view>
						</image>
					</view>
				</view>
				<!-- 7 -->
				<view class="">
					<view class="">
						<view class="">产品认证机构</view>
						<view class="" style="display: flex;align-items: center;font-size: 26rpx;">
							<view class="">
								<image
									style="width: 35rpx;height:35rpx;vertical-align: middle;margin:-5rpx 10rpx 0 0;"
									src="https://www.szzn.group/uploads/20221117/7627e63db93404da52d03fb020686dea.png"
									alt=""
								></image>
							</view>
							<view class="">专业机构检测认证</view>
						</view>
						<view class="" style="display: flex;align-items: center;font-size: 26rpx;">
							<view class="">
								<image
									style="width: 35rpx;height:35rpx;vertical-align: middle;margin:-5rpx 10rpx 0 0;"
									src="https://www.szzn.group/uploads/20221117/7627e63db93404da52d03fb020686dea.png"
									alt=""
								></image>
							</view>
							<view class="">产品安全放心</view>
						</view>
					</view>
					<view class=""><image src="http://www.szzn.group/uploads/20221107/514c7095cf14b78e3f168c0a028071bb.png"></image></view>
				</view>

				<!-- 8 -->
				<view class="">
					<view class="suoyuan"><view class="">真溯源真安全</view></view>
					<view class="">
						<view class="renzhen">
							<image src="http://www.szzn.group/uploads/20221107/9abc91e05fcb931ed81181a2e8613835.png"></image>
							<view class="">数字化专利保障农产品品质与安全</view>
						</view>
					</view>
					<view class=""><image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/27270202209221534514540.png"></image></view>
				</view>

				<!-- 9 -->
				<view class="">
					<view class=""><view class="">商品详情</view></view>
					<view class="">
						<view class="">
							<image src="http://www.szzn.group/uploads/20221107/1a1acce806c1aa45243adb60de31d491.png"></image>
							<view class="">规格参数</view>
						</view>
					</view>
					<view class="">
						<view class="">
							<view class="">规格</view>
							<view class="">1箱</view>
						</view>
					</view>

					<view class="">
						<view class="">
							<image src="http://www.szzn.group/uploads/20221107/f6a2855eab225f3ddfcd800471508090.png"></image>
							<view class="">商品介绍</view>
						</view>
					</view>
				</view>
				<!-- 10 -->
				<view class="">
					<view class="">
						<view class="">
							<mp-html :content="shoppingFrom.description" />
						</view>
					</view>
				</view>

				<!-- 11 -->
				<view class="">
					<!-- <view>坏果包赔·售后无忧</view>
					<view class="warmprompt" v-for="i in wuliu" :key="i">
						<view class="warmposition">{{ i.name }}</view>
						<view>
							<text class="dot"></text>
							{{ i.content }}
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 底部固定栏 -->
		<view class="fooder">
			<view class="kefu">
				<image src="http://www.szzn.group/uploads/20221107/54d941e8caf8d9fe4d52a657ef2c94d7.png" mode=""></image>
				<view class="smallicon">客服</view>
				<button open-type="contact">客服</button>
			</view>
			<view class="shopingcart" @click="goShoppingCard">
				<image src="http://www.szzn.group/uploads/20221107/9e95e3c7402500812a77889fbc71f7e4.png" mode=""></image>
				<view class="smallicon">购物车</view>
				<view class="jiaobiao" v-if="countLength != 0">
					<view class="">{{countLength}}</view>
				</view>
			</view>
			<view class="">
			</view>

			<view v-show="jf == ''" @click="immediately(shoppingFrom.is_spec, shoppingFrom.id, -1)">
				<view v-if="jf == ''" :class="jf == '' ? 'borders' : ''">加入购物车</view>
			</view>
			<view class="" @click="immediately(shoppingFrom.is_spec, shoppingFrom.id, 1)"><view class="">立即购买</view></view>
		</view>

		<!-- 底部弹出框 -->
		<view class="popup" v-show="isshowpopup" @touchmove.stop.prevent>
			<!-- 关闭弹窗 -->
			<view class="" @click="closePopup"><image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/6f924202209222017187961.png" mode=""></image></view>
			<view class="">
				<view class=""><image :src="shoppingFrom.image" mode=""></image></view>
				<view class="">
					<view class="">
						<view class="">￥{{ price == '' ? shoppingFrom.specs[0].price : price }}</view>
						<view class="">库存：{{ stock == '' ? shoppingFrom.specs[0].stock : stock }}件</view>
					</view>
					<view class="" style="color: #289958;">
						会员:
						<text>￥{{ member == '' ? shoppingFrom.specs[0].vip_price : member }}</text>
					</view>
					<!-- <view class="">一箱，共一袋</view> -->
				</view>
			</view>
			<!-- 规格 -->
			<view class="">
				<view class="">规格</view>
				<view class="">
					<scroll-view  scroll-y="true" class="scroll-Y"  :show-scrollbar="false">
						<view style="display: flex;flex-wrap: wrap;justify-content: flex-start;" class="">
							<view
								v-for="(i, inx) in shoppingFrom.specs"
								:key="i"
								@click="selectSpecification(i, inx)"
								:class="specificationindex == inx ? 'selectactive' : ''"
								class="specification"
							>
								{{ i.sku }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 数量 -->
			<view class="ys-count">
				<view class="">数量</view>
				<view class="">
					<view class="" @click="buyNum(0)">-</view>
					<view class="">{{ buynum }}</view>
					<view class="" @click="buyNum(1)">+</view>
				</view>
			</view>

			<view class="">
				<view class="" @click="liJiBuy(shoppingFrom.id, title)">{{ title == -1 ? '确定' : '立即购买' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getShoppingCartData,classShoppingDetail, promptlyBuy, updateShoppingCount, jionShoppingCart, getSubmitPingjia } from '@/api/api.js';
export default {
	data() {
		return {
			speciId: '', //规格ID
			price: '', //规格价格
			member: '', //规格会员价
			specification: '', //规格类型
			specificationindex: 0, //规格序号
			isshowpopup: false, //是否打开弹窗
			buynum: 1, //购买数量
			autoplay: true,
			shoppingFrom: {},
			interval: 3000,
			duration: 500,
			lunboStyle: 1,
			content: '',
			bannerlist: [],
			arr: [],
			address: '', // 地址
			latitude: '', // 经度
			longitude: '', //纬度
			marker: [
				{
					id:0,
					width:15,
					height:30,
					latitude: '',
					longitude: '',
					iconPath: '',
					callout: {
						content: ''
					}
				}
			],
			jf: '',
			is_integral: '', //积分
			// wuliu: [
			// 	{
			// 		name: '关于退货',
			// 		content: '因为是生鲜水果，出库商品影响二次销售所有商品下单成功后，不支持修改地址将不予做退件处理'
			// 	},
			// 	{
			// 		name: '关于赔付',
			// 		content:
			// 			'收到货之后请尽快开箱检查，若有坏果请将坏果，损坏部分向上与包装箱及快递面单同框拍照! 在24小时内反馈,我们将按照坏果比例给您赔偿，因果子口感不喜欢不好吃等主观原因我们不支持赔付'
			// 	},
			// 	{
			// 		name: '关于损耗',
			// 		content: '水果在运输中会有水分蒸发流失收到后重量稍有流失，重量误差100g左右为不赔付范围哦'
			// 	},
			// 	{
			// 		name: '关于拒收',
			// 		content: '因超派件、自取未取、停机空号地址错误等个人原因被退回的我们不支持售后。请知悉谅解'
			// 	},
			// 	{
			// 		name: '关于重量',
			// 		content: '由于体重秤偏差过大，所以秤重果子请以电子秤为主'
			// 	}
			// ],
			title: '',
			shoppingId: '',
			shoppingId: '',
			stock: '',
			limit: 20,
			page: 1,
			pinhjiaList: [],
			countLength:0,
			cardGoodsList:[]
		};
	},
	// 分享
	onShareAppMessage() {
		return {
			title: this.shoppingFrom.store_name,
			path: 'page_home/agriculturaldetail/agriculturaldetail?id=' + this.shoppingFrom.id
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.shoppingFrom.store_name,
			path: 'page_home/agriculturaldetail/agriculturaldetail?id=' + this.shoppingFrom.id
		};
	},
	onLoad(options) {
		uni.showLoading({})
		this.shoppingId = options.id;
		this.getSubmitPingjia(this.shoppingId);
		this.jf = options.jf;
		if (options.jf) {
			this.classShoppingDetail(options.id);
		} else {
			this.classShoppingDetail(options.id);
		}
		this.getShoppingCartData()
	},
	methods: {
		// 获取购物车数据
		getShoppingCartData() {
			this.countLength = 0
			getShoppingCartData().then(res => {
				if (res.data.code == '200') {
					this.cardGoodsList = res.data.data;
					for (var i in this.cardGoodsList) {
						var listGoods = this.cardGoodsList[i].cartInfo;
						for (var j in listGoods) {
							this.countLength++;
							this.$forceUpdate();
						}
					}
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		},
		//获取评价
		getSubmitPingjia(id) {
			let data = `productId=${id}&score=${0}&page=${this.page}&limit=${this.limit},`;
			getSubmitPingjia(data).then(res => {
				this.pinhjiaList = res.data.data;
			});
		},
		// 立即购买-加入购物车-规格
		immediately(type, id, status) {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			if (type == 0) {
				if (status == -1) {
					let data = `productId=${id}&spec_id=${0}`;
					jionShoppingCart(data).then(res => {
						if (res.data.code == '200') {
							uni.showToast({
								title: '加入成功',
								duration: 1000
							});
							this.isshowpopup = false;
							this.getShoppingCartData()
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon:'error'
							});
							this.isshowpopup = false;
						}
					});
				} else {
					this.title = 1;
					let data = `productId=${id}&spec_id=${0}`;
					promptlyBuy(data).then(res => {
						this.orderId = res.data.data.cartId;
						if (res.data.code == '200') {
							this.isshowpopup = false;
							uni.navigateTo({
								url: `/page_shoppingcart/submitorder/submitorder?cardId=${this.orderId}&new=${1}`
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon:'error'
							});
						}
					});
				}
			} else {
				this.isshowpopup = true;
				if (status == -1) {
					this.title = -1;
				} else {
					this.title = 1;
				}
			}
		},
		goVip() {
			uni.navigateTo({
				url: '/myIndex/becomeMember/becomeMember'
			});
		},
		// 立即购买
		liJiBuy(id, status) {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			if (this.stock == '') {
				this.stock = this.shoppingFrom.specs[0].stock;
			}
			if (this.stock <= 0) {
				uni.showToast({
					title: '该商品库存不足',
					duration: 1300,
					icon:'error'
				});
				return;
			}
			if (this.speciId == '') {
				this.speciId = this.shoppingFrom.specs[0].id;
			}
			if (status != -1) {
				let data = `productId=${id}&spec_id=${this.speciId}&cartNum=${this.buynum}`;
				promptlyBuy(data).then(res => {
					this.orderId = res.data.data.cartId;
					if (res.data.code == '200') {
						this.isshowpopup = false;
						uni.navigateTo({
							url: `/page_shoppingcart/submitorder/submitorder?cardId=${this.orderId}&new=${1}`
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 1300,
							icon:'error'
						});
					}
				});
			} else {
				let data1 = `productId=${id}&cartNum=${this.buynum}&spec_id=${this.speciId}`;
				jionShoppingCart(data1).then(res => {
					if (res.data.code == '200') {
						uni.showToast({
							title: '加入成功',
							duration: 1000
						});
						this.isshowpopup = false;
						this.getShoppingCartData()
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 1300,
							icon:'error'
						});
						this.isshowpopup = false;
					}
				});
			}
		},
		// 去评价
		evaluate() {
			uni.navigateTo({
				url: '/page_home/evaluate/evaluate?id=' + this.shoppingId
			});
		},
		// 轮播变化
		lunbo(e) {
			this.lunboStyle = e.detail.current + 1;
		},
		// 关闭弹窗
		closePopup() {
			this.isshowpopup = false;
		},
		// 选择规格
		selectSpecification(i, inx) {
			this.specificationindex = inx;
			this.speciId = i.id;
			this.price = i.price;
			this.member = i.vip_price;
			this.stock = i.stock;
		},
		// 购买数量
		buyNum(type) {
			if (this.speciId == '') {
				this.speciId = this.shoppingFrom.specs[0].id;
			}
			console.log(this.speciId);
			if (type == 0) {
				if (this.buynum == 1) return;
				else {
					this.buynum--;
					let data = `cartId=${this.shoppingId}&cartNum=${this.buynum}`;
					updateShoppingCount(data).then(res => {
					});
				}
			} else {
				this.buynum++;
				let data = `cartId=${this.shoppingId}&cartNum=${this.buynum}`;
				updateShoppingCount(data).then(res => {
				});
			}
		},
		// 图片预览
		imagePreview(index) {
			this.shoppingFrom.slider_image.forEach(item => {
				this.arr.push(item);
			});
			uni.previewImage({
				current: index,
				urls: this.arr
			});
			this.arr = [];
		},
		goShoppingCard(){
			uni.switchTab({
				url:'/pages/shoppingcart/index/index'
			})
		},
		// 获取商品详情
		classShoppingDetail(id) {
			let that = this;
			let data = `id=${id}`;
			classShoppingDetail(data).then(res => {
				if(res.data.code == '200'){
					uni.hideLoading()
					this.shoppingFrom = res.data.data;
					this.is_integral = this.shoppingFrom.is_integral;
					this.address = this.shoppingFrom.suppliers.province + this.shoppingFrom.suppliers.city + this.shoppingFrom.suppliers.district + this.shoppingFrom.suppliers.detail;
					uni.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=' + this.address + '&key=' + 'M3WBZ-CL7LI-556GU-5OXUX-JLYOK-JXFL5',
						success: res => {
							that.latitude = res.data.result.location.lat;
							that.longitude = res.data.result.location.lng;
							that.marker[0].latitude = res.data.result.location.lat;
							that.marker[0].longitude = res.data.result.location.lng;
							that.marker[0].callout.content = that.dizhi;
						}
					});
				}else {
					uni.hideLoading()
					uni.showToast({
						title:res.data.msg,
						duration:1000,
						icon:'error'
					})
				}
				
			});
		},
	}
};
</script>

<style lang="scss">
.main {
	background-color: #f7f7f7;
	width: 100%;
	height: 100%;
}

// 遮罩层
.shade {
	position: fixed;
	width: 100vw;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.header {
	position: relative;
}

.dott {
	position: absolute;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(106, 156, 69, 0.6);
	font-size: 22rpx;
	padding: 12rpx 25rpx;
	border-radius: 50px;
	display: flex;
	color: #fff;
}
.swiper {
	height: 700rpx;
}

.swiper-item {
	display: block;
	height: 700rpx;
	line-height: 700rpx;
	text-align: right;
	position: relative;
}

.swiper-item > image {
	width: 100%;
	height: 100%;
	display: block;
}
.heightss {
	height: 0 !important;
	padding: 0 !important;
}
.content {
	// 1
	> view:nth-child(1) {
		background-color: #fff;
		padding: 20rpx 0 0 0;

		> view:nth-child(1) {
			padding: 10rpx 30rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;

			text {
				font-size: 32rpx;
				font-weight: 700;
				margin-right: 10rpx;
			}
		}

		> view:nth-child(2) {
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			align-items: center;
			font-size: 32rpx;
			position: relative;

			image {
				width: 60rpx;
				height: 60rpx;
				vertical-align: middle;
			}

			text {
				font-size: 32rpx;
				font-weight: 700;
			}
		}

		> view:nth-child(3) {
			padding: 20rpx 30rpx;
			font-size: 26rpx;
			color: #ccc;
		}

		> view:nth-child(4) {
			padding: 0 30rpx;
			position: relative;

			image {
				height: 90rpx;
				width: 100%;
			}
		}
	}

	// 2
	> view:nth-child(2) {
		padding: 30rpx;
		margin-top: 10rpx;
		border-radius: 20rpx;
		background-color: #fff;

		image {
			width: 100%;
			height: 250rpx;
		}
	}

	// 3
	> view:nth-child(3) {
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 30rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
		}

		> view:nth-child(1) {
			font-weight: 700;
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1px solid #eee;

			> view:nth-child(1) {
				flex: 0.4;
			}

			> view:nth-child(2) {
				flex: 1.8;
			}
		}

		> view:nth-child(2) {
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1px solid #eee;

			> view:nth-child(1) {
				flex: 0.4;
			}

			> view:nth-child(2) {
				flex: 1.8;
				font-weight: 400;
			}

			> view:nth-child(3) {
				font-size: 26rpx;
				color: #ccc;
				font-weight: 400;
			}
		}

		> view:nth-child(3) {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			> view:nth-child(1) {
				flex: 0.3;
				font-weight: 700;
			}

			> view:nth-child(2) {
				flex: 1.9;
				display: flex;
				flex-wrap: wrap;
				justify-content: start;
				align-items: center;
				font-size: 26rpx;

				> view {
					display: flex;
					width: 180rpx;
					padding: 0 3rpx;
					font-size: 28rpx;
					vertical-align: middle;
				}
			}

			> view:nth-child(3) {
				font-weight: 700;
			}
		}
	}

	// 4
	> view:nth-child(4) {
		margin-top: 20rpx;
		border-radius: 20rpx;
		margin-top: 10rpx;
		background-color: #fff;
		> view:nth-child(1) {
			> view:nth-child(1) {
				image {
					height: 80rpx;
					width: 100%;
				}
			}
			> view:nth-child(2) {
				padding: 20rpx 0;
				display: flex;
				image {
					height: 200rpx;
					width: 170rpx;
					border-radius: 12rpx;
					margin-right: 40rpx;
				}
				view {
					font-size: 28rpx;

					> view:nth-child(1) {
						padding: 0 0 20rpx 0;
					}
				}
			}
			> view:nth-child(3) {
				padding: 10rpx 20rpx;

				image {
					height: 80rpx;
					width: 100%;
				}
			}
			> view:nth-child(4) {
				text-align: center;
				display: flex;
				> view:nth-child(1) {
					margin-right: 40rpx;
				}
				image {
					height: 160rpx;
					width: 160rpx;
					border-radius: 50%;
				}
			}
		}
	}
	// 5
	> view:nth-child(5) {
		margin-top: 12rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		> view:nth-child(1) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0 20rpx 0;
			> view:nth-child(2) {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				image {
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
				}
			}
			> view:nth-child(1) {
				font-size: 32rpx;
				text {
					font-size: 30rpx;
					color: #ccc;
				}
			}
		}
		> view:nth-child(2) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			> view:nth-child(1) {
				flex: 0.4;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}
			}
			> view:nth-child(2) {
				flex: 1.8;
			}
			> view:nth-child(3) {
			}
		}
		> view:nth-child(3) {
			padding: 20rpx 0;
		}
		> view:nth-child(4) {
			image {
				width: 140rpx;
				margin-right: 20rpx;
				height: 140rpx;
				border-radius: 20rpx;
			}
		}
	}
	// 6
	> view:nth-child(6) {
		margin-top: 10rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		> view:nth-child(1) {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	// 7
	> view:nth-child(7) {
		margin-top: 10rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		> view:nth-child(1) {
			> view:nth-child(1) {
				font-size: 32rpx;
			}
			> view:nth-child(2) {
				color: #289958;
				padding: 20rpx 0;
				font-size: 30rpx;
			}
			> view:nth-child(3) {
				color: #289958;
				font-size: 30rpx;
			}
		}
		image {
			width: 180rpx;
			height: 200rpx;
		}
	}
	// 8
	> view:nth-child(8) {
		margin: 15rpx;
		padding: 0 30rpx 0 0;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		> view:nth-child(1) {
			> view:nth-child(1) {
			}
		}
		> view:nth-child(2) {
			flex: 1.8;
			> view:nth-child(1) {
				display: flex;
				align-items: center;
			}
		}
		> view:nth-child(3) {
			> view:nth-child(1) {
				font-size: 32rpx;
			}
		}
		image {
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
		}
	}
	// 9
	> view:nth-child(9) {
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
			vertical-align: middle;
		}

		> view:nth-child(1) {
			padding: 20rpx 0;

			> view:nth-child(1) {
				font-size: 32rpx;
				font-weight: 700;
			}
		}

		> view:nth-child(2) {
			> view:nth-child(1) {
				display: flex;
				color: #289958;
			}
		}

		> view:nth-child(3) {
			padding: 30rpx 0;

			> view:nth-child(1) {
				display: flex;

				> view:nth-child(1) {
					flex: 1;
					color: #ccc;
				}

				> view:nth-child(2) {
					flex: 1;
				}
			}
		}

		> view:nth-child(4) {
			> view:nth-child(1) {
				display: flex;
				color: #289958;
			}
		}
	}

	// 10
	> view:nth-child(10) {
		padding: 0 0 150rpx 0;
	}
	// 11
	> view:nth-child(11) {
		padding: 0 40rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 25rpx;
		> view:nth-child(1) {
			font-weight: 700;
			text-align: center;
			font-size: 36rpx;
			padding: 15rpx 80rpx;
			border-radius: 50px;
			border: 1px solid #289958;
			color: #289958;
		}
	}
}
.warmprompt {
	margin-top: 40rpx;
	text-align: left;
	border: 2px solid #289958;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	font-size: 30rpx;
	color: #407959;
	position: relative;
}

.warmprompt:last-child {
	margin-bottom: 170rpx;
}

.warmposition {
	position: absolute;
	top: -35rpx;
	left: 50%;
	margin-left: -80rpx;
	border-radius: 50px;
	background-color: #289958;
	color: #fff;
	padding: 10rpx 20rpx;
}

.dot {
	display: inline-block;
	margin-right: 15rpx;
	width: 12rpx;
	height: 12rpx;
	background-color: #289958;
	border-radius: 50%;
}

.fooder {
	position: fixed;
	text-align: center;
	bottom: 0;
	width: 100%;
	height: 130rpx;
	background-color: #fff;
	box-shadow: 0 -1px 8px 1px rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 10rpx 0;
	font-size: 28rpx;

	.smallicon {
		font-size: 24rpx;
	}

	> view:nth-child(4) {
		padding: 20rpx 25rpx;
		border: 1px solid #289958;
		color: #289958;
		border-radius: 50px;
	}

	> view:nth-child(5) {
		padding: 20rpx 40rpx;
		background-color: #289958;
		color: #fff;
		border-radius: 50px;
	}

	image {
		width: 60rpx;
		height: 60rpx;
	}
}

.open {
	position: absolute;
	top: 25rpx;
	right: 0;
	display: flex;
	align-items: center;
	width: 160rpx;
	font-size: 26rpx;
	color: #289958;

	image {
		width: 40rpx !important;
		height: 40rpx !important;
	}
}

.openblackcode {
	position: absolute;
	top: 30rpx;
	left: 100rpx;
	font-size: 26rpx;
	color: #289958;
}

.popup {
	position: fixed;
	bottom: 0;
	background-color: #fff;
	width: 100%;
	height: 1100rpx;
	border-radius: 20rpx;
	padding: 20rpx 0;
	animation: move 0.3s;
	z-index: 11;

	> view:nth-child(1) {
		text-align: right;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}

	> view:nth-child(2) {
		display: flex;

		image {
			padding: 0 40rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}

		> view:nth-child(2) {
			flex: 2;
			padding: 15rpx 30rpx 15rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			> view:nth-child(1) {
				display: flex;
				justify-content: space-between;

				> view:nth-child(1) {
					flex: 1;
					font-size: 32rpx;
					font-weight: 700;
				}

				> view:nth-child(2) {
					font-size: 28rpx;
					color: #ccc;
				}
			}

			> view:nth-child(3) {
				font-size: 24rpx;
				color: #ccc;
			}
		}
	}

	> view:nth-child(3) {
		padding: 40rpx;
		> view:nth-child(1) {
			font-size: 30rpx;
		}
		> view:nth-child(2) {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			view {
				.specification {
					text-align: center;
					margin: 10rpx 8rpx;
					border-radius: 50px;
					padding: 18rpx 30rpx;
					font-size: 28rpx;
					color: #888;
					background-color: #f5f5fa;
			
				}
			}
		}
	}
	> view:nth-child(3)::-webkit-scrollbar {
		display: none;
	}
	> view:nth-child(4) {
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;

		> view:nth-child(2) {
			display: flex;
			text-align: center;
			> view:nth-child(1) {
				border-radius: 5rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #eeeef3;
			}

			> view:nth-child(2) {
				border-radius: 5rpx;
				width: 100rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #eeeef3;
				margin: 0 10rpx;
			}

			> view:nth-child(3) {
				border-radius: 5rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #258f52;
				color: #fff;
			}
		}
	}

	> view:nth-child(5) {
		position: fixed;
		text-align: center;
		bottom: 40rpx;
		left: 7%;
		width: 600rpx;
		border-radius: 50px;
		background-color: #289958;
		padding: 25rpx;
		color: #fff;
	}
}

.selectactive {
	background-color: #eefbf1 !important;
	color: #40a56b !important;
}

button {
	position: absolute;
	top: 0;
	right: 0;
	border: 0 !important;
	opacity: 0;
	background-color: #fff;
}

.detail-title {
	font-size: 32rpx;
	font-weight: 700;
}

.detail-report {
	display: flex;
	justify-content: center;
	color: #fff;
	border-radius: 10rpx;
	margin: 20rpx;
	background: linear-gradient(to right, #c8a761, #d7c193);
}

.pin-kong {
	color: #289958;
	font-size: 28rpx;
}

.yuandi-image {
	margin-top: 20rpx;
	position: relative;
	image {
		width: 100%;
		height: 200rpx;
	}
	.title {
		position: absolute;
		top: 60rpx;
		font-size: 26rpx;
		width: 180rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		right: 24rpx;
		color: #289958;
		font-weight: 700;
	}
	.pic {
		position: absolute;
		top: -10rpx;
		left: -12rpx;
		image {
			width: 220rpx;
			height: 60rpx;
		}
	}
}

.map {
	position: relative;
	top: -30rpx;
	height: 300px;
	border-radius: 20rpx !important;
	.address {
		margin: 20rpx 0 0 20rpx;
		display: flex;
		align-items: center;
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 6rpx 20rpx;
		border-radius: 50px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
		image {
			width: 30rpx;
			height: 30rpx;
			vertical-align: middle;
		}
		view {
			font-size: 26rpx;
		}
	}
}

.renzhen {
	image {
		width: 30rpx !important;
		height: 35rpx !important;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	font-size: 28rpx;
}

.suoyuan {
	width: 100rpx;
	background-color: #289958;
	padding: 7rpx 25rpx;
	font-size: 28rpx;
	color: #fff;
	border-radius: 20rpx 45rpx 45rpx 20rpx;
	margin-right: 10rpx;
}

.vip-price {
	background: url('http://www.szzn.group/uploads/20221107/74efcb4a4e66059be8c27c58fd868eaa.png') no-repeat;
	background-size: 100% 100%;
	width: 270rpx;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
	color: #258f52;
	padding: 0 0 0 10rpx;

	.member {
		font-size: 26rpx !important;
		font-weight: normal !important;
		margin-right: 8rpx;
		color: #f6e4c4;
		width: 70rpx !important;
	}

	.lijian {
		font-size: 24rpx !important;
		font-weight: normal !important;
		color: #387959;
		margin-left: 8rpx;
	}
}
.kefu {
	position: relative;
	button {
		width: 120rpx;
		margin: 0 !important;
		position: absolute;
		opacity: 0;
	}
}
.map-title {
	border-radius: 20rpx;
}
.yinc {
	opacity: 0 !important;
}
.ys-count {
	position: fixed;
	bottom: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 670rpx;
}
.yanse {
	color: #289958;
}
.borders {
	border: 0 !important;
}
@keyframes move {
	0% {
		height: 0;
	}
	100% {
		height: 1100rpx;
	}
}
.scroll-Y {
	height: 550rpx;
}
.shopingcart {
	position: relative !important;
	.jiaobiao {
		position: absolute !important;
		top: -14rpx;
		right: -14rpx;
		>view {
			font-size: 22rpx;
			background-color: red;
			color: #fff;
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			border-radius: 50%;
		}
	}
}
</style>
